<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
    <link rel="stylesheet" href="/ftl/css/laypage.css">
    <script src="/ftl/js/vue/vue.min.js"></script>
    <script src="/ftl/js/jquery/jquery.min.js"></script>
    <script src="/ftl/js/laypage/laypage.js"></script>
    <script src="/ftl/js/layer/layer.js"></script>
</head>
<body>
<div id="app" class="container">
    <form action="" class="form-inline" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="">用户名称</label>
            <input type="text" class="form-control" id="name" placeholder="用户名称">
        </div>
        <button type="button" id="findUser" class="btn btn-success">查询用户</button>
        <button type="button" id="addUser" class="btn btn-danger">新增用户</button>
    </form>
    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <th>编号</th>
                <th>用户</th>
                <th>年龄</th>
                <th>部门</th>
                <th>操作</th>
            </tr>
            </thead>
          <tbody>
          <tr class="active" v-for="(item,index) in result">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.age}}</td>
              <td>{{item.dept.deptname}}</td>
              <td>
                  <a href="javascript:void(0)" @click="updateUser(item.id)">编辑</a>
                  <a href="javascript:void(0)" @click="deleteUser(item.id)">删除</a>
              </td>
          </tr>
          </tbody>
            <tr>
                <td colspan="3">
                    <div id="pagenav"></div>
                </td>
            </tr>
        </table>
    </div>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            result:[]
        }
    })
    //查询用户数据
    var getUserPageList = function(curr){
        $.ajax({
            type:"post",
            url:"/getPage.do",
            data:{
                pageNum:curr || 1,
                pageSize:5,
                name:$("#name").val()
            },
            success:function(data){
                app.result=data.page
                laypage({
                    cont:"pagenav",//容器，用来设置分页效果
                    pages:data.totalPage,
                    skin:'#DB7093',
                    first:"首页",
                    last:"最后一页",
                    curr:curr || 1,//当前页
                    //触发分页之后的方法回调
                    jump:function(obj,first){
                        if(!first){
                            getUserPageList(obj.curr)
                        }
                    }
                })
            }
        })
    }
    getUserPageList()
    $("#findUser").click(function(){
        getUserPageList()
    })
    //新增用户事件
    $("#addUser").click(function () {
        layer.open({
            type: 2,
            title: '添加用户',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1100px', '600px'],
            content: '/ftl/add.html',
            end: function () {
                getUserPageList();
            }
        });
    });
    //编辑用户事件
    var updateUser=function (id){
        layer.open({
            type: 2,
            title: '添加用户',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1100px', '600px'],
            content: '/updatePage.do?id='+id,
            end: function () {
                getUserPageList();
            }
        });
    }
    //删除事件
    var deleteUser=function (id){
        $.ajax({
            type:"post",
            url: "/deleteUser.do",
            data:{
                "id":id
            },
            success:function (data){
                getUserPageList()
            }
        })
    }
</script>
</body>
</html>